<template>
	<view class="tabBar" :style="{ color:tabBar.color }">
		<view class="item" v-for="(item,index) in tabBar.items" :key="index" @click="changeTab(item.filePath)">
			<view v-if="item.midShow == false" class="inner_item" :style="{ background:tabBar.backgroundColor }">
				<!-- #ifdef MP-WEIXIN -->
				<image class="icon" v-if="showIndex != item.index" :src="item.iconPath" mode=""></image>
				<image class="icon" v-else :src="item.selectIconPath" mode=""></image>
				<!-- #endif -->
				<!-- #ifdef H5 || APP-PLUS -->
				<img class="icon" v-if="showIndex != item.index" :src="item.iconPath" mode=""></img>
				<img class="icon" v-else :src="item.selectIconPath" mode=""></img>
				<!-- #endif -->
				<view class="word" :class="showIndex != item.index? '':'active'">{{ item.label }}</view>
			</view>
			<view class="inner_item" :style="{ background:tabBar.backgroundColor }" v-else>
				<image class="mid_video" src="../static/icon/live.png" mode=""></image>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
	export default{
		data(){
			return{
				showIndex:'1'
			}
		},
		props:{
			queryIndex:{
				type:String,
				default:""
			}
		},
		created() {
			this.showIndex = this.queryIndex
		},
		computed:{
			...mapState(['tabBar'])
		},
		methods:{
			changeTab(url){
				uni.switchTab({
					url:`/${url}`
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.tabBar{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 98rpx;
		z-index: 99999;
		display: flex;
		.item{
			flex: 1;
			height: 98rpx;
			.icon{
				width: 42rpx;
				height: 42rpx;
				margin-bottom: 6rpx;
			}
			.inner_item{
				width: 100%;
				height: 98rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				font-size: 20rpx;
				.active{
					color: #e94921;
				}
				.mid_video{
					width: 88rpx;
					height: 78rpx;
				}
			}
		}
	}
</style>